<template>
    <van-nav-bar
            title="登录页面"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"

    />

    <div class="loginStyle">
        <el-form :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <van-tabs v-model="active">
                <van-tab title="账号密码登录">
                    <van-field
                            v-model="loginForm.phone"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                            v-model="loginForm.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <el-button
                            size="normal"
                            type="primary"
                            style="width: 100%;"
                            native-type="submit"
                            @click="submitLogin()"
                    >登录
                    </el-button>
                    <div style="margin: 16px;">
                        还没账号，快来
                        <router-link to="/register">注册</router-link>
                    </div>
                </van-tab>
                <van-tab title="手机号验证码登录">
                    <van-field
                            v-model="loginForm.phone"
                            name="手机号"
                            label="手机号"
                            placeholder="手机号"
                            :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <van-field
                            v-model="loginForm.password"
                            name="pattern"
                            left-icon="comment-o"
                            placeholder="验证码"
                            :rules="[{required: true, message: '请填写验证码'  }]"
                    >
                        <template #button>
                            <van-button size="small" type="primary" @click="sendCode">{{btnsendmsg}}</van-button>
                        </template>
                    </van-field>
                    <div style="margin: 16px;">
                        <van-button round block type="info" @click="checkcode(),loginByCode()" native-type="submit">登录
                        </van-button>
                    </div>
                </van-tab>

            </van-tabs>

        </el-form>
    </div>
</template>
<script>
    export default {
        name: 'login',
        data() {
            return {
                loading: false,
                loginForm: {
                    phone: '',
                    password: '',
                },
                checked: true,
                rules: {
                    phone: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                },
                btnsendmsg: "发送验证码",
                times: 60,
            }
        },
        methods: {
            onClickLeft() {
                this.$router.push("/MY")
            },
            submitLogin() {
                var that = this;
                console.log(this.loginForm)
                this.axios.post('http://localhost:8080/api/user/login.do',
                    "phone=" + this.loginForm.phone + "&password=" + this.loginForm.password
                ).then(function (res) {
                    if (res.data.code == 10000) {
                        let path = that.$route.query.redirect
                        that.$router.replace(path == '/' || path == undefined ? '/my' : path)
                        // that.$router.push("/")
                        that.$store.commit("setToken", res.data.data)
                        console.log(res.data.data)
                    } else {
                        that.$toast("登陆失败")
                    }
                })
            }, sendCode() {
                var that = this;
                if (this.loginForm.phone.length == 11) {//39.103.146.142
                    this.axios.post('http://localhost:8080/api/sms/sendcode.do', "phone=" + this.loginForm.phone).then(function (resp) {
                        if (resp.data.code == 10000) {
                            that.btnsendmsg = "再次发送(" + that.times + ")";
                            that.djs();
                            that.$toast("短信已发送成功")
                        } else {
                            that.$toast("请检查网络")
                        }
                    })
                } else {
                    this.$toast("请输入正确的手机号")
                }
            }, djs() {
                var that = this;
                that.btnsend = true;
                that.t = setInterval(function () {
                    if (that.times > 1) {
                        that.times--;
                        that.btnsendmsg = "再次发送(" + that.times + ")";
                    } else {
                        //停止定时任务
                        clearInterval(that.t);
                        that.btnsendmsg = "再次发送";
                        that.btnsend = false;
                    }
                }, 1000);
            }, checkcode() {
                var that = this;
                this.axios.post('http://localhost:8080/api/sms/checkcode.do',
                    "phone=" + this.loginForm.phone + "&code=" + this.loginForm.password)
                    .then(function (res) {
                        if (res.data.code == 10000) {
                            that.btnadd = false;
                            that.$toast("手机验证码校验成功");
                        } else {
                            console.log(res.data.msg);
                            that.$toast(res.data.msg);
                        }
                    });
            }, loginByCode() {
                var that = this;
                console.log(this.loginForm)
                this.axios.post('http://localhost:8080/api/user/logincode.do',
                    "phone=" + this.loginForm.phone + "&password=" + this.loginForm.password
                ).then(function (res) {
                    if (res.data.code == 10000) {
                        let path = that.$route.query.redirect
                        that.$router.replace(path == '/' || path == undefined ? '/my' : path)
                    } else {
                        that.$toast("登陆失败")
                    }
                })
            }
        },
    }
</script>

<style>
    .loginStyle {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../assets/a.jpg');
        background-size: 100% 100%;
        height: 100%;
        background-position:center center;
        background-size: cover;
        /*opacity: 0.7;*/
    }

    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>